<template>
  <div class="address-add-edit">
    <van-nav-bar
      :title="title"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <van-address-edit
      :addressInfo="addressInfo"
      :area-list="areaList"
      show-postal
      show-set-default
      :show-delete="!addFlag"
      @save="handleSave"
      @delete="handleDelete"
    />
  </div>
</template>

<script>
  import axios from 'axios';
  import { Toast } from 'vant';
  import requestUrl from '../../serverApi';
  import AreaJson from '../../../static/area';

  export default {
    data() {
      return {
        addFlag: true,
        areaList: AreaJson,
        title: '',
        addressInfo: {},
      }
    },
    created() {
      const { addressId } = this.$route.query;
      if (!addressId) {
        this.addFlag = true;
        this.title = '新增地址';
      } else {
        this.addFlag = false;
        this.title = '编辑地址';
        this.getAddressInfo(addressId);
      }
    },
    methods: {
      onClickLeft() {
        this.$router.go(-1);
      },
      handleSave(obj) {
        const paramsObj = {
          name: obj.name,
          telephone: obj.tel,
          province: obj.province,
          city: obj.city,
          county: obj.county,
          addressDetail: obj.addressDetail,
          areaCode: obj.areaCode,
          postalCode: obj.postalCode,
          isDefault: obj.isDefault,
        }
        if (this.addFlag) {
          axios.post(requestUrl.addAddress, paramsObj).then((res) => {
            const data = res.data;
            if (data.code === 200) {
              Toast.success(data.message);
              this.$router.push({name: 'Address'});
            }
          }).catch((err) => {
            console.log(err);
          });
        } else {
          // 编辑的情况下
          const { addressId } = this.$route.query;
          paramsObj.addressId = addressId;
          axios.put(requestUrl.editAddress, paramsObj).then((res) => {
            const data = res.data;
            if (data.code === 200) {
              Toast.success(data.message);
              this.$router.push({name: 'Address'});
            }
          }).catch((err) => {
            console.log(err);
          });
        }
        
      },
      handleDelete(obj) {
        const { addressId } = this.$route.query;
        const url = `${requestUrl.deleteAddress}?addressId=${addressId}`;
        axios.delete(url).then((res) => {
          const data = res.data;
          if (data.code === 200) {
            Toast.success(data.message);
            this.$router.push({name: 'Address'});
          }
        }).catch((err) => {
          console.log(err);
        });
      },
      getAddressInfo(addressId) {
        const url = `${requestUrl.getAddressInfo}?addressId=${addressId}`;
        axios.get(url).then((res) => {
          const data = res.data;
          const { message = {}, code } = data;
          if (code === 200 && message) {
            message.tel = message.telephone;
            delete message.telephone;
            this.addressInfo = message;
          }
        }).catch((err) => {
          console.log(err);
        });
      },
    },
  }
</script>

<style scoped>
  .address-add-edit {
    background-color: #fff;
  }
</style>